<template>
    <view class="normal-login-container" style="background-color: #f2ecde; height: 100vh">
        <view style="
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            padding-top: 5%;
        ">
            <n-avatar :size="148" :src="icon" color="#FFFFFF00"></n-avatar>
        </view>
        <view class="login-form-content">
            <view>
                <el-input
                    class="inputgu"
                    @blur="inputColor[0] = '#6beab8'"
                    @focus="inputColor[0] = '#60a5fa'"
                    style="height: 100rpx; font-size: 32rpx;"
                    placeholder="请输入用户名"
                    v-model="registerForm.username"
                >
                    <template #prefix>
                        <el-icon :color="inputColor[0]" class="el-input__icon" :size="22">
                            <User />
                        </el-icon>
                    </template>
                </el-input>
            </view>
            <view>
                <el-input
                    class="inputgu"
                    @blur="inputColor[1] = '#6beab8'"
                    @focus="inputColor[1] = '#60a5fa'"
                    type="password"
                    style="height: 100rpx; font-size: 32rpx;"
                    placeholder="请输入密码"
                    v-model="registerForm.password"
                >
                    <template #prefix>
                        <el-icon :color="inputColor[1]" class="el-input__icon" :size="22">
                            <EditPen />
                        </el-icon>
                    </template>
                </el-input>
            </view>
            <view>
                <el-input
                    class="inputgu"
                    @blur="inputColor[2] = '#6beab8'"
                    @focus="inputColor[2] = '#60a5fa'"
                    type="password"
                    style="height: 100rpx; font-size: 32rpx;"
                    placeholder="请确认密码"
                    v-model="registerForm.confirmPassword"
                >
                    <template #prefix>
                        <el-icon :color="inputColor[2]" class="el-input__icon" :size="22">
                            <CircleCheck />
                        </el-icon>
                    </template>
                </el-input>
            </view>
            <view class="inputgu" style="width: 60%;" v-if="captchaEnabled">
                <el-input
                    @blur="inputColor[3] = '#6beab8'"
                    @focus="inputColor[3] = '#60a5fa'"
                    style="height: 100rpx; font-size: 32rpx"
                    v-model="registerForm.code"
                    placeholder="请输入验证码"
                    maxlength="4"
                >
                    <template #prefix>
                        <el-icon :color="inputColor[3]" class="el-input__icon" :size="22">
                            <Notebook />
                        </el-icon>
                    </template>
                </el-input>
                <view class="login-code">
                    <image style="height: 100rpx;" :src="codeUrl" @click="getCode" class="login-code-img"></image>
                </view>
            </view>
            <view class="action-btn">
                <button @click="handleRegister" style="background-color: #f2be45;" class="login-btn cu-btn block bg-blue lg round">
                    立即注册
                </button>
            </view>
        </view>
        <view class="text-center" style="margin-top: 30rpx; font-size: 28rpx;">
            <text class="text-grey">已有账号？</text>
            <text @click="handleLogin" class="text-blue" style="margin-left: 10rpx;">去登录</text>
        </view>
        <view class="xieyi text-center">
            <text class="text-grey1">注册即代表同意</text>
            <text @click="handleUserAgrement" class="text-blue">《用户协议》</text>
            <text @click="handlePrivacy" class="text-blue">《隐私协议》</text>
        </view>
    </view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { getCurrentInstance } from 'vue';
import { getCodeImg } from '@/api/login';

const { proxy } = getCurrentInstance();

// 数据初始化
const icon = ref('/static/images/login/icon.png');
const inputColor = ref(['#6beab8', '#6beab8', '#6beab8', '#6beab8']);
const registerForm = reactive({
    username: '',
    password: '',
    confirmPassword: '',
    code: '',
    uuid: ''
});
const codeUrl = ref('');
const captchaEnabled = ref(true);

// 获取验证码
function getCode() {
    getCodeImg().then(res => {
        captchaEnabled.value = res.captchaEnabled ?? true;
        if (captchaEnabled.value) {
            codeUrl.value = `data:image/gif;base64,${res.img}`;
            registerForm.uuid = res.uuid;
        }
    });
}

// 表单验证
function validateForm() {
    if (!registerForm.username) {
        proxy.$modal.msgError('用户名不能为空');
        return false;
    }
    if (registerForm.username.length < 4) {
        proxy.$modal.msgError('用户名长度不能小于4位');
        return false;
    }
    if (!registerForm.password) {
        proxy.$modal.msgError('密码不能为空');
        return false;
    }
    if (registerForm.password !== registerForm.confirmPassword) {
        proxy.$modal.msgError('两次输入密码不一致');
        return false;
    }
    if (captchaEnabled.value && !registerForm.code) {
        proxy.$modal.msgError('请输入验证码');
        return false;
    }
    return true;
}

// 注册提交
async function handleRegister() {
    if (!validateForm()) return;

    try {
        proxy.$modal.loading('注册中...');
        // 调用注册 API
        // const res = await registerApi(registerForm);
        proxy.$modal.closeLoading();
        proxy.$modal.msgSuccess('注册成功');
        setTimeout(() => {
            uni.navigateBack();
        }, 1500);
    } catch (error) {
        proxy.$modal.closeLoading();
        getCode();
    }
}

// 跳转到登录页面
function handleLogin() {
    console.log('跳转到登录页面');
    uni.navigateTo({
        url: '/pages/login'
    });
}

// 用户协议
function handleUserAgrement() {
    console.log('查看用户协议');
    // 跳转到用户协议页面
}

// 隐私协议
function handlePrivacy() {
    console.log('查看隐私协议');
    // 跳转到隐私协议页面
}

onMounted(() => {
    getCode();
});
</script>

<style lang="scss" scoped>
/* 注册页面iOS风格样式 */
.normal-login-container {
    background-color: #ecfdf5 !important;
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    
    &::before {
        content: '';
        position: absolute;
        top: -80px;
        left: -50px;
        right: -50px;
        height: 320px;
        background: linear-gradient(135deg, #059669 0%, #10b981 100%);
        transform: rotate(-8deg);
        z-index: 0;
        border-bottom-left-radius: 50% 30px;
        border-bottom-right-radius: 50% 30px;
    }
    
    /* 头像部分样式 */
    :deep(.n-avatar) {
        margin-top: 20px;
        position: relative;
        z-index: 1;
        border: 4px solid rgba(255, 255, 255, 0.7);
        box-shadow: 0 4px 15px rgba(5, 150, 105, 0.15);
    }
    
    .login-form-content {
        margin-top: 24px;
        width: 86%;
        margin: 24px auto 0;
        position: relative;
        z-index: 1;
        
        .inputgu {
            margin-top: 20px;
            border-radius: 16px;
            border: none;
            transition: all 0.3s ease;
            height: 56px;
            
            :deep(.el-input__wrapper) {
                background-color: rgba(107, 234, 184, 0.1);
                backdrop-filter: blur(5px);
                -webkit-backdrop-filter: blur(5px);
                border-radius: 16px;
                height: 56px;
                padding: 0 16px;
                box-shadow: 0 0 0 1px rgba(107, 234, 184, 0.5) !important;
                border: 1px solid rgba(107, 234, 184, 0.3);
                
                &:focus-within {
                    background-color: rgba(107, 234, 184, 0.2);
                    box-shadow: 0 0 0 2px rgba(107, 234, 184, 0.6) !important;
                    border-color: rgba(107, 234, 184, 0.5);
                }
            }
            
            :deep(.el-input__inner) {
                height: 56px;
                font-size: 16px;
                color: #065f46;
            }
            
            :deep(.el-input__icon) {
                line-height: 56px;
                color: #6beab8 !important;
            }
        }
        
        /* 验证码容器样式 */
        .login-code {
            position: relative;
            top: -58px;
            right: -140px;
            width: 100%;
            height: 56px;
            border-radius: 16px;
            overflow: visible;
            
            /* 输入框部分 */
            :deep(.el-input) {
                width: 100%;
                height: 56px;
                
                .el-input__wrapper {
                    padding-right: 250rpx;
                    background-color: rgba(107, 234, 184, 0.1);
                    border-radius: 16px !important;
                    box-shadow: 0 0 0 1px rgba(107, 234, 184, 0.5) !important;
                    border: 1px solid rgba(107, 234, 184, 0.3);
                    height: 56px;
                }
            }
            
            /* 验证码图片 */
            .login-code-img {
                position: absolute;
                right: 0;
                top: 0;
                width: 240rpx;
                height: 56px;
                border-radius:16px !important;
                background-color: #fff;
                object-fit: cover;
                border-left: 1px solid rgba(209, 250, 229, 0.6);
                z-index: 2;
            }
        }
        
        /* 按钮样式 */
        .action-btn {
            margin-top: 36px;
            display: flex;
            justify-content: center;
            
            .login-btn {
                width: 100%;
                height: 56px;
                line-height: 56px;
                font-size: 18px;
                font-weight: 500;
                background-color: #059669 !important;
                border-radius: 16px;
                transition: all 0.3s ease;
                color: white;
                -webkit-tap-highlight-color: transparent;
                box-shadow: 0 4px 12px rgba(5, 150, 105, 0.15);
                
                &:active {
                    transform: scale(0.98);
                    background: linear-gradient(135deg, #047857 0%, #059669 100%) !important;
                    box-shadow: 0 2px 8px rgba(5, 150, 105, 0.1);
                }
            }
        }
    }

    .text-center {
        font-size: 20px;
        position: relative;
        z-index: 1;
        margin-top: 60px;
        
        .text-grey {
            color: #4b5563;
        }
        
        .text-blue {
            color: #059669;
            margin-left: 6px;
            -webkit-tap-highlight-color: transparent;
            
            &:active {
                color: #047857;
            }
        }
    }
    
    .xieyi {
        position: fixed;
        bottom: 40px;
        width: 100%;
        font-size: 13px;
        position: relative;
        z-index: 1;
        padding: 0 10px;
        
        .text-grey1 {
            color: #4b5563;
        }
        
        .text-blue {
            color: #059669;
            margin: 0 4px;
            -webkit-tap-highlight-color: transparent;
            
            &:active {
                color: #047857;
            }
        }
    }
}
</style>